<template>
  <div class="home-container">
    <!-- 顶部欢迎区域 -->
    <div class="welcome-section">
      <div class="welcome-content">
        <h1>欢迎回到Dook学院</h1>
        <p>今天是 {{ currentDate }}，开始你的学习冒险吧！</p>
      </div>
          </div>

    <!-- 问卷区域 - 移到欢迎栏下方 -->
    <el-card class="dook-intro-card">
      <div class="intro-header">
        <h2>欢迎来到Dook学院</h2>
        <span class="intro-badge">守夜人论坛</span>
      </div>
      <div class="intro-content">
        <p>Dook学院是世界上最古老、最神秘的学府之一，拥有悠久的历史与丰富的文化底蕴。作为一所以培养精英人才为目标的学府，我们注重学术研究与实践能力的平衡发展。</p>
        <p>守夜人论坛是学院内部交流平台，所有发言都会被记录和归档。请谨记：<span class="motto">"毁灭与新生"</span></p>
      </div>
      <el-divider content-position="center">每日问卷</el-divider>
      <div class="daily-survey">
        <div v-if="!surveyCompleted" class="survey-container">
          <h3>{{ currentSurvey.title }}</h3>
          <p class="survey-description">{{ currentSurvey.description }}</p>
          <div class="survey-questions">
            <div v-for="(question, qIndex) in currentSurvey.questions" :key="qIndex" class="survey-question">
              <p class="question-text">{{ qIndex + 1 }}. {{ question.text }}</p>
              <div class="question-options">
                <el-radio-group v-model="userAnswers[qIndex]">
                  <el-radio
                    v-for="(option, oIndex) in question.options"
                    :key="oIndex"
                    :label="oIndex"
                    class="question-option"
                  >{{ option }}</el-radio>
                </el-radio-group>
              </div>
            </div>
          </div>
          <div class="survey-actions">
            <el-button type="primary" @click="submitSurvey">提交问卷</el-button>
          </div>
        </div>
        <div v-else class="survey-result">
          <h3>问卷分析结果</h3>
          <div class="result-card">
            <div class="result-icon">
              <i :class="surveyResultData.icon"></i>
            </div>
            <div class="result-content">
              <h4>{{ surveyResultData.title }}</h4>
              <p>{{ surveyResultData.description }}</p>
              <el-tag :type="surveyResultData.tagType">{{ surveyResultData.tagText }}</el-tag>
            </div>
          </div>
          <div class="result-tips">
            <p>{{ surveyResultData.tips }}</p>
            <p class="next-survey">下一次问卷将在明天开放</p>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <el-row :gutter="20">
        <!-- 左侧区域 -->
        <el-col :xs="24" :sm="24" :md="16">
          <!-- 最新公告 -->
          <el-card class="content-card announcement-card">
            <div slot="header" class="card-header">
              <h2><i class="el-icon-bell"></i> 最新公告</h2>
              <el-button type="text" @click="goToAllArticles">查看全部</el-button>
            </div>
            <div v-if="notices.length === 0" class="empty-data">
              <i class="el-icon-document"></i>
              <p>暂无公告</p>
            </div>
            <el-timeline v-else>
              <el-timeline-item
                v-for="(item, index) in notices"
                :key="index"
                :timestamp="item.createTime"
                placement="top"
                :color="index === 0 ? '#409EFF' : '#909399'"
              >
                <el-card class="timeline-card">
                  <h3>{{ item.title }}</h3>
                  <p v-if="item.description" class="notice-description">{{ item.description }}</p>
                  <div class="notice-actions">
                    <el-button type="text" size="small" @click.stop="viewBulletinDetail(item)" icon="el-icon-view">查看详情</el-button>
                  </div>
      </el-card>
              </el-timeline-item>
            </el-timeline>
      </el-card>

          <!-- 热门帖子 -->
          <el-card class="content-card hot-posts-card">
            <div slot="header" class="card-header">
              <h2><i class="el-icon-hot-water"></i> 热门帖子</h2>
              <el-button type="text" @click="goToForum">进入论坛</el-button>
      </div>
            <div v-if="loading" class="loading-container">
              <el-skeleton :rows="3" animated />
            </div>
            <div v-else-if="hotPosts.length === 0" class="empty-data">
              <i class="el-icon-chat-dot-round"></i>
              <p>暂无热门帖子</p>
            </div>
            <div v-else class="hot-posts-list">
              <div
                v-for="(post, index) in hotPosts"
                :key="post.tipId"
                class="post-item"
                @click="viewPostDetail(post.tipId)"
              >
                <div class="post-rank" :class="`rank-${index + 1}`">{{ index + 1 }}</div>
                <div class="post-content">
                  <h3 class="post-title">{{ post.tipTitel }}</h3>
                  <div class="post-meta">
                    <span class="post-author">
                      <i class="el-icon-user"></i> {{ post.tipUserN }}
                    </span>
                    <span class="post-category">
                      <el-tag size="mini" type="info">{{ getCategoryName(post.tipTypeId) }}</el-tag>
                    </span>
                    <span class="post-time">
                      <i class="el-icon-time"></i> {{ formatDate(post.tipTime) }}
                    </span>
                  </div>
                </div>
                <div class="post-stats">
                  <div class="stat-item">
                    <i class="el-icon-view"></i> {{ post.tipViews }}
                  </div>
                  <div class="stat-item">
                    <i class="el-icon-chat-dot-round"></i> {{ post.tipComments }}
                  </div>
                  <div class="stat-item">
                    <i class="el-icon-star-off"></i> {{ post.tipGoods }}
                  </div>
                </div>
        </div>
      </div>
    </el-card>
        </el-col>

        <!-- 右侧区域 -->
        <el-col :xs="24" :sm="24" :md="8">
          <!-- 搜索框 -->
          <el-card class="content-card search-card">
            <div slot="header" class="card-header">
              <h2><i class="el-icon-search"></i> 搜索公告</h2>
          </div>
            <div class="search-container">
              <div class="search-input-group">
                <el-input
                  placeholder="搜索公告内容..."
                  prefix-icon="el-icon-search"
                  v-model="searchText"
                  class="search-box"
                  @keyup.enter.native="searchBulletins"
                >
                  <el-select
                    v-model="searchType"
                    slot="append"
                    placeholder="类型"
                    style="width: 110px"
                  >
                    <el-option label="标题" value="title"></el-option>
                    <el-option label="内容" value="content"></el-option>
                    <el-option label="发布者" value="author"></el-option>
                    <el-option label="日期" value="date"></el-option>
                  </el-select>
                </el-input>
                <el-button type="primary" @click="searchBulletins">搜索</el-button>
              </div>
              <div class="hot-keywords">
                <span>热门:</span>
                <el-tag
                  v-for="(keyword, index) in hotKeywords"
                  :key="index"
                  size="mini"
                  @click="searchText = keyword; searchBulletins()"
                >{{ keyword }}</el-tag>
              </div>
            </div>

            <!-- 搜索结果 -->
            <div v-if="searchResults.length > 0" class="search-results">
              <div class="search-results-header">
                <h3>搜索结果 ({{ searchResults.length }})</h3>
                <el-button type="text" @click="clearSearchResults">清除</el-button>
              </div>
              <el-timeline>
                <el-timeline-item
                  v-for="(result, index) in searchResults"
                  :key="index"
                  :timestamp="result.createTime"
                  placement="top"
                >
                  <el-card>
                    <div class="search-result-item" @click="viewBulletinDetail(result)">
                      <h3>{{ result.title }}</h3>
                      <div class="search-result-meta">
                        <span v-if="result.guserName"><i class="el-icon-user"></i> {{ result.guserName }}</span>
                        <el-tag size="mini" type="info">公告</el-tag>
                      </div>
                      <p v-if="result.content" class="search-result-content">{{ truncateContent(result.content) }}</p>
                    </div>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>

            <div v-else-if="hasSearched" class="empty-search-results">
              <i class="el-icon-document-remove"></i>
              <p>未找到匹配的公告</p>
            </div>
          </el-card>

          <!-- 月度活跃统计 -->
          <div class="statistics-block">
            <div class="chart-container">
              <div class="chart-header">
                <div class="chart-title">本月发帖统计</div>
                <div class="chart-value">
                  {{ userActivity.currentValue }}
                  <el-tag type="info" size="small" class="rating-tag">{{ activityRating }}</el-tag>
                </div>
              </div>
              <div class="chart-body">
                <div class="chart-bars">
                  <div v-for="(segment, index) in userActivity.monthData" :key="index" class="chart-bar-item">
                    <div class="chart-bar-wrapper">
                      <div class="chart-bar" :style="{ height: segment.value + '%', backgroundColor: segment.color }">
                        <span class="chart-bar-count" v-if="segment.postCount > 0">{{ segment.postCount }}</span>
                      </div>
                    </div>
                    <div class="chart-bar-label">{{ segment.label }}</div>
                  </div>
                </div>
              </div>
              <div class="activity-rating-info">
                <div class="rating-list">
                  <div class="rating-item">A+: 30+篇</div>
                  <div class="rating-item">A: 20+篇</div>
                  <div class="rating-item">B+: 15+篇</div>
                  <div class="rating-item">B: 10+篇</div>
                  <div class="rating-item">C+: 5+篇</div>
                  <div class="rating-item">C: 0+篇</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 智能助手 -->
          <el-card class="content-card eva-card">
            <div slot="header" class="card-header">
              <h2><i class="el-icon-service"></i> 智能助手</h2>
            </div>
            <div class="eva-container">
              <div class="eva-avatar">
                <i class="el-icon-service"></i>
              </div>
              <div class="eva-info">
                <div class="eva-name">Eva</div>
                <div class="eva-status">在线，可以提问</div>
              </div>
            </div>
            <div class="eva-actions">
              <el-button type="primary" icon="el-icon-chat-dot-round" @click="gotoCustomer">开始聊天</el-button>
              <el-button icon="el-icon-question" @click="showFaqDialog">常见问题</el-button>
            </div>
            <div class="eva-faq-preview" v-if="!faqDialogVisible">
              <div class="faq-title">热门问题：</div>
              <ul class="faq-list">
                <li v-for="(item, index) in commonQuestions.slice(0, 3)" :key="index" @click="showFaqDialog(index)">
                  <i class="el-icon-question-filled"></i> {{ item.question }}
                </li>
              </ul>
            </div>
          </el-card>

          <!-- 待办事项 -->
          <el-card class="content-card todo-card">
            <div slot="header" class="card-header">
              <h2><i class="el-icon-tickets"></i> 待办事项</h2>
              <el-button type="text" icon="el-icon-plus" @click="showAddTodoDialog">添加</el-button>
            </div>
            <div v-if="todoList.length === 0" class="empty-data">
              <i class="el-icon-tickets"></i>
              <p>暂无待办</p>
            </div>
            <div v-else class="todo-list">
              <div v-for="(todo, index) in todoList" :key="index" class="todo-item-container">
                <el-checkbox
                  v-model="todo.completed"
                  class="todo-item"
                  :class="{ 'completed': todo.completed }"
                  @change="handleTodoStatusChange(index)"
                >
                  <span class="todo-text">{{ todo.text }}</span>
                  <span class="todo-deadline">{{ todo.deadline }}</span>
                </el-checkbox>
                <div class="todo-actions">
                  <el-button type="text" icon="el-icon-edit" @click="editTodo(index)" size="mini"></el-button>
                  <el-button type="text" icon="el-icon-delete" @click="deleteTodo(index)" size="mini"></el-button>
                </div>
              </div>
            </div>
            <div v-if="todoList.length > 0" class="todo-summary">
              <span>{{ completedTodos }}/{{ todoList.length }} 已完成</span>
              <el-progress
                :percentage="todoProgress"
                :color="todoProgressColor"
              ></el-progress>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 添加待办对话框 -->
    <el-dialog
      :title="isEditMode ? '编辑待办' : '添加待办'"
      :visible.sync="todoDialogVisible"
      width="500px"
      :before-close="handleCloseDialog"
    >
      <el-form :model="todoForm" ref="todoForm" :rules="todoRules" label-width="80px">
        <el-form-item label="内容" prop="text">
          <el-input v-model="todoForm.text" placeholder="请输入待办事项内容"></el-input>
        </el-form-item>
        <el-form-item label="截止日期" prop="deadline">
          <el-date-picker
            v-model="todoForm.deadlineDate"
            type="datetime"
            placeholder="选择截止日期和时间"
            format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="todoDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveTodo">确 定</el-button>
      </span>
    </el-dialog>

    <!-- FAQ对话框 -->
    <el-dialog
      title="常见问题解答"
      :visible.sync="faqDialogVisible"
      width="500px"
      custom-class="faq-dialog">
      <div class="faq-content" v-if="commonQuestions.length > 0">
        <el-tabs v-model="selectedFaqIndex" type="card">
          <el-tab-pane
            v-for="(item, index) in commonQuestions"
            :key="index"
            :label="item.question"
            :name="index + ''"
          >
            <div class="faq-answer">
              <p>{{ item.answer }}</p>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="faqDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 公告详情抽屉 -->
      <el-drawer
        :title="selectedBulletin && selectedBulletin.title"
        :visible.sync="bulletinDrawer"
        :direction="'rtl'"
        :size="'50%'"
        custom-class="announcement-drawer">
      <div class="announcement-container" v-if="selectedBulletin">
        <div class="announcement-header">
          <h1 class="title">{{ selectedBulletin.title }}</h1>
          <div class="announcement-meta">
            <div class="meta-item">
              <i class="el-icon-user"></i>
              <span>{{ selectedBulletin.guserName }}</span>
            </div>
            <div class="meta-item">
              <i class="el-icon-time"></i>
              <span>{{ selectedBulletin.createTime }}</span>
            </div>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="announcement-content">
          <p>{{ selectedBulletin.content }}</p>
        </div>
        <div class="announcement-footer">
          <el-button type="text" icon="el-icon-back" @click="bulletinDrawer = false">返回</el-button>
        </div>
          </div>
      </el-drawer>
  </div>
</template>

<script>
import {getContent, getFristBulletin, getTopBulletin, alltip, getMyTip} from "@/api/api";

export default {
    created() {
        this.formatCurrentDate();
        this.loadTodosFromStorage();
        this.getMyPosts(); // 优先获取用户帖子数据，用于计算活跃度
        this.getFristBulletin();
        this.getTopBulletin();
        this.getAllBulletins(); // 加载所有公告用于搜索
        this.getHotPosts(); // 获取热门帖子
        this.checkPreviousSurvey(); // 检查是否已完成今日问卷
    },
    data() {
    return {
      // 现有数据
        selectedRow: null,
        drawerSize: '50%',
        direction: 'rtl',
        drawer: false,
        articleDetail:'',
        selectedId:'',
      searchText: '',
      notices: [],
      articles: [],

      // 每日问卷相关数据
      surveyCompleted: false,
      userAnswers: [], // 用户回答
      currentSurvey: {
        title: "学院异常事件日报",
        description: "请如实回答以下问题，您的回答将被记录并用于学院的安全维护。",
        questions: [
          {
            text: "今天是否发现校园内有异常能量波动？",
            options: ["没有发现", "有轻微波动", "有明显波动", "波动强烈"]
          },
          {
            text: "您是否在校园内发现了可疑的符文或标记？",
            options: ["没有发现", "发现但不确定", "确定发现了", "发现多处"]
          },
          {
            text: "您是否感觉到有不明人士在监视校园？",
            options: ["没有", "有点怀疑", "比较确定", "非常确定"]
          },
          {
            text: "您今天的心情如何？",
            options: ["非常平静", "略有不安", "相当紧张", "极度恐惧"]
          },
          {
            text: "您是否愿意加入学院的晚间巡逻任务？",
            options: ["不愿意", "考虑中", "偶尔愿意", "非常愿意"]
          }
        ]
      },
      surveyResultData: {}, // 问卷结果

      // 新增数据
      currentDate: '',
      searchType: 'title',
      hotKeywords: ['课程安排', '期末考试', '活动', '奖学金'],
      userActivity: {
        currentValue: '0篇',
        trend: 0,
        monthData: []
      },
      monthlyPostCount: 0,
      activityRating: 'C',
      myPosts: [], // 用户发布的帖子
      todoList: [],
      editingTodoIndex: -1,
      isEditMode: false,
      todoDialogVisible: false,
      todoForm: {
        text: '',
        deadlineDate: '',
        priority: 1,
        notes: '',
        completed: false
      },
      todoRules: {
        text: [
          { required: true, message: '请输入待办事项内容', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
        ],
        deadlineDate: [
          { required: true, message: '请选择截止日期', trigger: 'change' }
        ]
      },
      priorityColors: ['#C0C4CC', '#E6A23C', '#F56C6C'],
      priorityTexts: ['普通', '重要', '紧急'],
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const date = new Date();
            date.setHours(23, 59, 59);
            picker.$emit('pick', date);
          }
        }, {
          text: '明天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() + 3600 * 1000 * 24);
            date.setHours(23, 59, 59);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周后',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
            date.setHours(23, 59, 59);
            picker.$emit('pick', date);
          }
        }]
      },
      // 搜索相关
      searchResults: [],
      hasSearched: false,

      // 公告详情
      bulletinDrawer: false,
      selectedBulletin: null,
      allBulletins: [], // 存储所有公告

      // 智能助手相关
      faqDialogVisible: false,
      selectedFaqIndex: 0,
      commonQuestions: [
        {
          question: "如何修改个人资料？",
          answer: "您可以点击页面右上角的头像，在下拉菜单中选择个人设置，然后进入个人资料页面进行修改。修改完成后，点击保存按钮即可。"
        },
        {
          question: "如何发布新的讨论帖？",
          answer: "在论坛页面，点击右上角的发布新帖按钮，填写标题和内容，选择合适的分类，然后点击发布按钮即可。请确保您的内容遵循社区规范。"
        },
        {
          question: "忘记密码怎么办？",
          answer: "在登录页面点击忘记密码链接，输入您的注册邮箱，系统将发送一封包含重置密码链接的邮件到您的邮箱。点击链接后，您可以设置新的密码。"
        },
        {
          question: "如何添加好友？",
          answer: "在好友列表页面，点击添加好友按钮，输入对方的用户名或邮箱进行搜索，然后发送好友请求。对方接受请求后，你们就成为好友了。"
        },
        {
          question: "如何参与群聊？",
          answer: "在通讯页面的左侧导航栏中选择群聊选项，您可以看到所有您加入的群聊列表。点击任意群聊即可进入聊天界面。如需创建新群聊，点击"+"按钮。"
        },
        {
          question: "如何查看历史公告？",
          answer: "在首页点击查看所有公告链接，或者直接在导航菜单中选择公告栏，即可查看所有历史公告。您可以使用搜索功能查找特定公告。"
        },
        {
          question: "积分规则是什么？",
          answer: "您可以通过发布内容、参与讨论、每日登录等方式获取积分。积分可以用于提升用户等级、兑换虚拟礼品或特殊权限。详细规则请查看积分规则页面。"
        }
      ],
      // 热门帖子相关
      hotPosts: [],
      loading: false,
    };
  },
  computed: {
    filteredArticles() {
      const query = this.searchText.toLowerCase();
      let filtered = this.articles.filter(article => article.title.toLowerCase().includes(query)||article.createTime.toLowerCase().includes(query));

      // Move pinned items to the top
      return filtered.sort((a, b) => (b.pinned - a.pinned));
    },
    completedTodos() {
      return this.todoList.filter(todo => todo.completed).length;
    },
    todoProgress() {
      return this.todoList.length > 0
        ? Math.round((this.completedTodos / this.todoList.length) * 100)
        : 0;
    },
    todoProgressColor() {
      const progress = this.todoProgress;
      if (progress < 30) return '#F56C6C';
      if (progress < 70) return '#E6A23C';
      return '#67C23A';
    }
  },
  methods: {
     async selectAndOpenDrawer(id) {
          this.selectedId = id;
         const response = await getContent({
             params: {
                 id: id,
             },
         });
          this.articleDetail = response.data.content;
          this.drawer = true;
      },
     async getTopBulletin(){
         const response = await getTopBulletin();
         if (response && response.data && response.data.message === "成功") {
            this.articles= response.data.data;
         } else {
             this.$message.error("加载失败");
         }
      },
      async getFristBulletin(){
         const response = await getFristBulletin();
         if (response && response.data && response.data.message === "成功"){
        this.notices = response.data.data.list;
        // 为每条公告添加描述
        this.notices.forEach(notice => {
          notice.description = notice.description || '查看公告获取更多详细信息...';
        });
      } else {
             this.$message.error("公告列表加载失败");
         }
    },
    goToAllArticles() {
      // 移除不必要的日志
      // 这里你可以添加路由导航逻辑
      this.$router.push('/Main/bulletinBoard');
    },
    goToForum() {
      this.$router.push('/Main/forum');
    },
    gotoCustomer() {
          this.$router.push('/Main/customerService');
    },
    formatCurrentDate() {
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth() + 1;
      const day = now.getDate();
      const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      const weekday = weekdays[now.getDay()];

      this.currentDate = `${year}年${month}月${day}日 ${weekday}`;
    },
    loadTodosFromStorage() {
      const savedTodos = localStorage.getItem('dook-todos');
      if (savedTodos) {
        try {
          this.todoList = JSON.parse(savedTodos);
        } catch (e) {
          console.error('Failed to parse saved todos:', e);
          this.todoList = [];
        }
      }
    },
    saveTodosToStorage() {
      localStorage.setItem('dook-todos', JSON.stringify(this.todoList));
    },
    showAddTodoDialog() {
      this.isEditMode = false;
      this.resetTodoForm();
      this.todoDialogVisible = true;
    },
    editTodo(index) {
      this.isEditMode = true;
      this.editingTodoIndex = index;
      const todo = this.todoList[index];

      this.todoForm = {
        text: todo.text,
        deadlineDate: this.isValidDate(todo.deadlineDate) ? todo.deadlineDate : '',
        priority: todo.priority || 1,
        notes: todo.notes || '',
        completed: todo.completed
      };

      this.todoDialogVisible = true;
    },
    isValidDate(dateStr) {
      if (!dateStr) return false;
      const date = new Date(dateStr);
      return !isNaN(date.getTime());
    },
    resetTodoForm() {
      this.todoForm = {
        text: '',
        deadlineDate: '',
        priority: 1,
        notes: '',
        completed: false
      };

      if (this.$refs.todoForm) {
        this.$refs.todoForm.resetFields();
      }
    },
    handleCloseDialog() {
      this.todoDialogVisible = false;
      this.resetTodoForm();
    },
    saveTodo() {
      this.$refs.todoForm.validate((valid) => {
        if (valid) {
          const todo = {
            text: this.todoForm.text,
            deadline: this.formatDeadline(this.todoForm.deadlineDate),
            deadlineDate: this.todoForm.deadlineDate,
            priority: this.todoForm.priority,
            notes: this.todoForm.notes,
            completed: this.todoForm.completed,
            createdAt: new Date().toISOString()
          };

          if (this.isEditMode && this.editingTodoIndex !== -1) {
            // 编辑模式
            this.todoList.splice(this.editingTodoIndex, 1, todo);
            this.$message.success('待办事项已更新');
          } else {
            // 添加模式
            this.todoList.push(todo);
            this.$message.success('待办事项已添加');
          }

          // 保存到本地存储
          this.saveTodosToStorage();

          this.todoDialogVisible = false;
          this.resetTodoForm();
        } else {
          return false;
        }
      });
    },
    deleteTodo(index) {
      this.$confirm('确定要删除这个待办事项吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.todoList.splice(index, 1);
        this.saveTodosToStorage();
        this.$message.success('待办事项已删除');
      }).catch(() => {
        // 取消删除
      });
    },
    handleTodoStatusChange(index) {
      // 当待办事项状态改变时保存到本地存储
      this.saveTodosToStorage();
    },
    formatDeadline(dateStr) {
      if (!dateStr) return '';

      const date = new Date(dateStr);
      const now = new Date();
      const tomorrow = new Date(now);
      tomorrow.setDate(tomorrow.getDate() + 1);

      // 判断是否是今天
      if (date.toDateString() === now.toDateString()) {
        const hours = date.getHours().toString().padStart(2, '0');
        const minutes = date.getMinutes().toString().padStart(2, '0');
        return `今天 ${hours}:${minutes}`;
      }

      // 判断是否是明天
      if (date.toDateString() === tomorrow.toDateString()) {
        const hours = date.getHours().toString().padStart(2, '0');
        const minutes = date.getMinutes().toString().padStart(2, '0');
        return `明天 ${hours}:${minutes}`;
      }

      // 一周内的日期显示星期几
      const weekDiff = Math.floor((date - now) / (24 * 3600 * 1000));
      if (weekDiff < 7 && weekDiff > 0) {
        const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
        const weekday = weekdays[date.getDay()];
        const hours = date.getHours().toString().padStart(2, '0');
        const minutes = date.getMinutes().toString().padStart(2, '0');
        return `${weekday} ${hours}:${minutes}`;
      }

      // 其他情况显示完整日期
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}`;
    },
    // 获取所有公告数据用于搜索
    async getAllBulletins() {
      try {
        // 先从置顶公告获取数据
        const topResponse = await getTopBulletin();
        let bulletins = [];

        if (topResponse && topResponse.data && topResponse.data.message === "成功") {
          bulletins = bulletins.concat(topResponse.data.data || []);
        }

        // 再从一般公告获取数据
        const response = await getFristBulletin();
        if (response && response.data && response.data.message === "成功") {
          bulletins = bulletins.concat(response.data.data.list || []);
        }

        // 去重处理
        this.allBulletins = this.removeDuplicates(bulletins, 'contentId');

      } catch (error) {
        console.error("获取公告数据失败:", error);
        this.$message.error("获取公告数据失败");
      }
    },

    // 数组去重
    removeDuplicates(array, key) {
      const seen = new Set();
      return array.filter(item => {
        const value = item[key];
        if (seen.has(value)) {
          return false;
        }
        seen.add(value);
        return true;
      });
    },

    // 搜索公告
    searchBulletins() {
      if (!this.searchText.trim()) {
        this.$message.warning('请输入搜索内容');
        return;
      }

      const query = this.searchText.toLowerCase();
      let results = [];

      // 根据搜索类型进行过滤
      switch (this.searchType) {
        case 'title':
          results = this.allBulletins.filter(item =>
            item.title && item.title.toLowerCase().includes(query)
          );
          break;
        case 'content':
          results = this.allBulletins.filter(item =>
            item.content && item.content.toLowerCase().includes(query)
          );
          break;
        case 'author':
          results = this.allBulletins.filter(item =>
            item.guserName && item.guserName.toLowerCase().includes(query)
          );
          break;
        case 'date':
          results = this.allBulletins.filter(item =>
            item.createTime && item.createTime.toLowerCase().includes(query)
          );
          break;
        default:
          // 如果没有选择类型或选择了全部，则在所有字段中搜索
          results = this.allBulletins.filter(item =>
            (item.title && item.title.toLowerCase().includes(query)) ||
            (item.content && item.content.toLowerCase().includes(query)) ||
            (item.guserName && item.guserName.toLowerCase().includes(query)) ||
            (item.createTime && item.createTime.toLowerCase().includes(query))
          );
      }

      this.searchResults = results;
      this.hasSearched = true;

      if (results.length === 0) {
        this.$message.info('未找到匹配的公告');
      }
    },

    // 查看公告详情
    async viewBulletinDetail(bulletin) {
      this.selectedBulletin = { ...bulletin };

      // 如果没有详细内容，则获取内容
      if (!bulletin.content && bulletin.contentId) {
        try {
          const response = await getContent({
            params: {
              id: bulletin.contentId,
            },
          });

          if (response && response.data) {
            this.selectedBulletin.content = response.data.content;
          }
        } catch (error) {
          console.error("获取公告内容失败:", error);
          this.$message.error("获取公告内容失败");
        }
      }

      this.bulletinDrawer = true;
    },

    // 截断内容，只显示部分
    truncateContent(content, length = 100) {
      if (!content) return '';
      return content.length > length
        ? content.substring(0, length) + '...'
        : content;
    },

    // 获取用户发布的帖子
    async getMyPosts() {
      try {
        this.loading = true;

        // 直接使用getMyTip API获取用户帖子，与个人信息页相同的实现方式
        try {
          const response = await getMyTip({
            PageNumber: 1,
            PageSize: 20 // 获取足够多的帖子以便分析
          });

          if (response && response.data && response.data.message === "成功") {
            this.myPosts = response.data.data.list;
            // 移除不必要的日志
            this.calculateMonthlyActivity();
          } else {
            // 如果获取失败，使用空数组初始化
            this.calculateMonthlyActivity([]);
            this.$message.error('获取帖子列表失败');
          }
        } catch (error) {
          console.error("获取我的帖子失败:", error);
          this.calculateMonthlyActivity([]);
        }
      } finally {
        this.loading = false;
      }
    },

    // 计算月度活跃度指标
    calculateMonthlyActivity() {
      try {
        // 获取当前月份的帖子
        const now = new Date();
        const thisMonth = now.getMonth();
        const thisYear = now.getFullYear();

        const monthlyPosts = this.myPosts.filter(post => {
          const postDate = new Date(post.tipTime);
          return postDate.getMonth() === thisMonth && postDate.getFullYear() === thisYear;
        });

        this.monthlyPostCount = monthlyPosts.length;

        // 更新用户活跃度图表数据
        this.updateTimeSegmentActivityData(monthlyPosts);

        // 设置活跃度评级
        if (this.monthlyPostCount >= 30) this.activityRating = 'A+';
        else if (this.monthlyPostCount >= 20) this.activityRating = 'A';
        else if (this.monthlyPostCount >= 15) this.activityRating = 'B+';
        else if (this.monthlyPostCount >= 10) this.activityRating = 'B';
        else if (this.monthlyPostCount >= 5) this.activityRating = 'C+';
        else this.activityRating = 'C';
      } catch (error) {
        console.error('计算月度活跃度失败:', error);
      }
    },

    // 更新使用时间段的活跃度数据
    updateTimeSegmentActivityData(monthlyPosts) {
      const now = new Date();
      const thisMonth = now.getMonth();
      const thisYear = now.getFullYear();

      // 计算本月天数
      const daysInMonth = new Date(thisYear, thisMonth + 1, 0).getDate();

      // 将月份分为5个时间段
      const timeSegments = 5;
      const daysPerSegment = Math.ceil(daysInMonth / timeSegments);

      // 初始化每个时间段的帖子数
      const segmentPostCounts = Array(timeSegments).fill(0);

      // 统计每个时间段的发帖数量
      if (monthlyPosts && monthlyPosts.length > 0) {
        monthlyPosts.forEach(post => {
          if (!post.tipTime) return;

          const postDate = new Date(post.tipTime);
          const dayOfMonth = postDate.getDate();

          // 确定帖子属于哪个时间段
          const segmentIndex = Math.min(Math.floor((dayOfMonth - 1) / daysPerSegment), timeSegments - 1);
          segmentPostCounts[segmentIndex]++;
        });
      }

      // 生成时间段标签
      const segmentLabels = [];
      for (let i = 0; i < timeSegments; i++) {
        const startDay = i * daysPerSegment + 1;
        const endDay = Math.min((i + 1) * daysPerSegment, daysInMonth);
        segmentLabels.push(`${startDay}-${endDay}日`);
      }

      // 设置每个时间段的颜色
      const currentDay = now.getDate();
      const currentSegment = Math.min(Math.floor((currentDay - 1) / daysPerSegment), timeSegments - 1);

      // 构建图表数据
      const monthData = [];
      for (let i = 0; i < timeSegments; i++) {
        monthData.push({
          label: segmentLabels[i],
          value: segmentPostCounts[i] > 0 ? Math.max(20, segmentPostCounts[i] * 20) : 0, // 确保有值的柱子至少有高度
          postCount: segmentPostCounts[i],
          color: i === currentSegment ? '#409EFF' : '#909399'
        });
      }

      // 更新数据
      this.userActivity = {
        currentValue: this.monthlyPostCount + ' 篇帖子',
        trend: 0,
        monthData: monthData
      };
    },

    // 获取活跃度等级的类型
    getActivityLevelType(activity) {
      if (activity >= 10) return 'success';
      if (activity >= 5) return 'warning';
      return 'info';
    },

    // 初始化空的活跃度数据
    initEmptyActivityData() {
      const now = new Date();
      const thisMonth = now.getMonth();
      const thisYear = now.getFullYear();

      // 计算本月天数
      const daysInMonth = new Date(thisYear, thisMonth + 1, 0).getDate();

      // 将月份分为5个时间段
      const timeSegments = 5;
      const daysPerSegment = Math.ceil(daysInMonth / timeSegments);

      // 生成时间段标签
      const segmentLabels = [];
      for (let i = 0; i < timeSegments; i++) {
        const startDay = i * daysPerSegment + 1;
        const endDay = Math.min((i + 1) * daysPerSegment, daysInMonth);
        segmentLabels.push(`${startDay}-${endDay}日`);
      }

      // 高亮当前所在的时间段
      const currentDay = now.getDate();
      const currentSegment = Math.min(Math.floor((currentDay - 1) / daysPerSegment), timeSegments - 1);

      // 构建空数据
      const monthData = [];
      for (let i = 0; i < timeSegments; i++) {
        monthData.push({
          label: segmentLabels[i],
          value: 0,
          postCount: 0,
          color: i === currentSegment ? '#409EFF' : '#909399'
        });
      }

      this.userActivity = {
        currentValue: '0 篇帖子',
        trend: 0,
        monthData: monthData
      };

      this.monthlyPostCount = 0;
      this.activityRating = 'C';
    },

    // 获取热门帖子
    async getHotPosts() {
      this.loading = true;
      try {
        // 调用API获取所有帖子
        const response = await alltip({
          PageNumber: 1,
          PageSize: 20 // 获取更多帖子以便排序
        });

        if (response && response.data && response.data.message === "成功") {
          // 获取帖子列表并按浏览量排序
          const posts = response.data.data.list || [];
          this.hotPosts = posts
            .sort((a, b) => b.tipViews - a.tipViews) // 按浏览量降序排序
            .slice(0, 5); // 只取前5条
        } else {
          console.error("获取热门帖子失败");
        }
      } catch (error) {
        console.error("获取热门帖子出错:", error);
      } finally {
        this.loading = false;
      }
    },

    // 查看帖子详情
    viewPostDetail(tipId) {
      this.$router.push({path: '/Main/forum/detail', query: {tipId: tipId}});
    },

    // 获取分类名称
    getCategoryName(typeId) {
      // 从vuex store中获取部门列表
      const deptList = this.$store.state.deptList || [];
      const dept = deptList.find(dept => dept.dept_id === typeId);
      return dept ? dept.dept_name : '未分类';
    },

    // 格式化日期
    formatDate(dateString) {
      if (!dateString) return '';
      const date = new Date(dateString);
      const now = new Date();
      const diffTime = Math.abs(now - date);
      const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));

      if (diffDays === 0) {
        return '今天';
      } else if (diffDays === 1) {
        return '昨天';
      } else if (diffDays < 7) {
        return `${diffDays}天前`;
      } else {
        return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
      }
    },
    // 格式化活跃度显示
    formatActivityCount(count) {
      if (count >= 4) {
        return '4+';
      }
      return count + '篇';
    },

    // 添加显示FAQ对话框的方法
    showFaqDialog(index) {
      this.faqDialogVisible = true;
      if (index !== undefined) {
        this.selectedFaqIndex = index + '';
      }
    },

    // 清除搜索结果
    clearSearchResults() {
      this.searchResults = [];
      this.searchText = '';
      this.hasSearched = false;
    },

    // 问卷相关方法
    submitSurvey() {
      // 检查是否所有问题都已回答
      if (this.userAnswers.length < this.currentSurvey.questions.length) {
        const unansweredCount = this.currentSurvey.questions.length - this.userAnswers.length;
        this.$message.warning(`还有${unansweredCount}个问题未回答，请完成所有问题`);
        return;
      }

      // 分析用户回答
      this.analyzeResults();

      // 标记问卷已完成
      this.surveyCompleted = true;

      // 存储今日已完成状态
      localStorage.setItem('dook-survey-completed-date', new Date().toDateString());
      localStorage.setItem('dook-survey-result', JSON.stringify(this.surveyResultData));
    },

    analyzeResults() {
      // 计算用户的总得分
      let totalScore = 0;
      this.userAnswers.forEach(answer => {
        totalScore += answer;
      });

      // 计算警戒等级 (0-3分：低，4-8分：中，9-14分：高，15-20分：紧急)
      const maxPossibleScore = this.currentSurvey.questions.length * 3; // 每题最高得3分
      const alertLevel = (totalScore / maxPossibleScore) * 100;

      // 分析用户倾向
      const hasHighAnswers = this.userAnswers.some(answer => answer >= 2);
      const willPatrol = this.userAnswers[4] >= 2; // 最后一题是否愿意巡逻

      // 根据分数和倾向确定结果
      if (alertLevel < 25) {
        this.surveyResultData = {
          title: "警戒等级：低",
          description: "校园内未发现明显异常，目前处于安全状态。",
          icon: "el-icon-success",
          tagType: "success",
          tagText: "安全",
          tips: "感谢您的反馈！目前校园内一切正常，请继续保持警惕。"
        };
      } else if (alertLevel < 50) {
        this.surveyResultData = {
          title: "警戒等级：中",
          description: "校园内可能存在轻微异常，建议保持警惕。",
          icon: "el-icon-warning-outline",
          tagType: "warning",
          tagText: "注意",
          tips: "校园安全小组已收到您的反馈，将增派人员在相关区域巡逻。"
        };
      } else if (alertLevel < 75) {
        this.surveyResultData = {
          title: "警戒等级：高",
          description: "校园内发现多处异常情况，安全系统已启动。",
          icon: "el-icon-warning",
          tagType: "danger",
          tagText: "警告",
          tips: "请避免在夜间独自外出，保持通讯设备畅通，随时关注学院通知。"
        };
      } else {
        this.surveyResultData = {
          title: "警戒等级：紧急",
          description: "校园内存在严重异常，防护系统已全面激活。",
          icon: "el-icon-alarm-clock",
          tagType: "danger",
          tagText: "紧急",
          tips: "学院已启动紧急防护协议，请所有学生即刻返回宿舍区，等待进一步指示。"
        };
      }

      // 根据是否愿意巡逻添加额外信息
      if (willPatrol) {
        this.surveyResultData.tips += " 感谢您愿意参与巡逻任务，守夜人小组会与您联系。";
      }
    },

    checkPreviousSurvey() {
      // 检查是否今天已完成问卷
      const lastCompletedDate = localStorage.getItem('dook-survey-completed-date');
      const today = new Date().toDateString();

      if (lastCompletedDate === today) {
        this.surveyCompleted = true;
        // 恢复上次的结果
        const savedResult = localStorage.getItem('dook-survey-result');
        if (savedResult) {
          try {
            this.surveyResultData = JSON.parse(savedResult);
          } catch (e) {
            console.error('Failed to parse saved survey result:', e);
          }
        }
      } else {
        // 重置问卷
        this.surveyCompleted = false;
        this.userAnswers = [];
      }
    },
  },
  mounted() {
    // 检查是否已完成今日问卷
    this.checkPreviousSurvey();
  },
};
</script>

<style scoped>
.home-container {
  padding: 20px;
  background-color: #f8f9fa;
  min-height: 100vh;
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 欢迎区域 */
.welcome-section {
  display: flex;
  background: linear-gradient(135deg, #5e72e4 0%, #825ee4 100%);
  background-size: 200% 200%;
  animation: gradientBG 15s ease infinite;
  border-radius: 15px;
  padding: 30px;
  margin-bottom: 40px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(94, 114, 228, 0.3);
  transition: all 0.3s ease;
}

.welcome-content {
  flex: 1;
  z-index: 1;
  animation: slideInLeft 0.8s ease-out;
}

@keyframes slideInLeft {
  from { transform: translateX(-30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.welcome-content h1 {
  font-size: 32px;
  margin-bottom: 15px;
  font-weight: 800;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  background: linear-gradient(90deg, #ffffff, #e0e6ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
}

.welcome-content p {
  font-size: 18px;
  margin-bottom: 20px;
  opacity: 0.9;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.5px;
}

.welcome-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.welcome-image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 20px;
}

.welcome-image img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.notification-badge /deep/ .el-badge__content {
  top: 0;
  right: -5px;
}

/* 统计卡片 */
.stats-section {
  margin-top: 24px;
  margin-bottom: 24px;
}

.dook-intro-card {
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
  background: linear-gradient(145deg, #ffffff, #f0f7f7);
  border: 1px solid rgba(94, 114, 228, 0.1);
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}

.dook-intro-card:hover {
  box-shadow: 0 15px 35px rgba(94, 114, 228, 0.15);
  transform: translateY(-5px);
}

.dook-intro-card:before {
  content: '';
  position: absolute;
  top: -10px;
  right: -10px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(94, 114, 228, 0.1) 0%, rgba(94, 114, 228, 0) 70%);
  border-radius: 50%;
  z-index: 0;
}

.intro-header {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  position: relative;
  z-index: 1;

}

.intro-header h2 {
  font-size: 32px;
  font-weight: 800;
  margin: 0;
  background: linear-gradient(90deg, #5e72e4, #825ee4);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0px 2px 4px rgba(94, 114, 228, 0.2);
  letter-spacing: 1px;
  animation: textShine 3s linear infinite;
}

.intro-badge {
  display: inline-block;
  background: linear-gradient(135deg, #ff0844, #ffb199);
  background-size: 200% 200%;
  animation: gradientBG 5s ease infinite;
  color: white;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 20px;
  margin-left: 12px;
  box-shadow: 0 4px 8px rgba(255, 8, 68, 0.2);
  animation: pulse 2s infinite;
}

.intro-content {
  background-color: #f8faff;
  padding: 25px;
  border-radius: 12px;
  border-left: 5px solid #5e72e4;
  margin-bottom: 30px;
  box-shadow: 0 8px 15px rgba(94, 114, 228, 0.15);
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

.intro-content:hover {
  box-shadow: 0 12px 20px rgba(94, 114, 228, 0.2);
  transform: translateY(-3px);
}

.intro-content p {
  margin: 0 0 15px;
  line-height: 1.8;
  color: #525f7f;
  font-size: 15px;
  letter-spacing: 0.3px;
}

.intro-content p:last-child {
  margin-bottom: 0;
}

.intro-content .motto {
  font-weight: bold;
  color: #5e72e4;
  font-style: italic;
  position: relative;
  display: inline-block;
  padding: 0 5px;
}

.intro-content .motto:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(94, 114, 228, 0.2);
  border-radius: 2px;
}

.el-divider {
  margin: 30px 0;
}

.el-divider .el-divider__text {
  background: linear-gradient(90deg, #5e72e4, #825ee4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

.daily-survey {
  margin-top: 20px;
}

.daily-survey .survey-container {
  background-color: white;
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border-top: 4px solid #5e72e4;
}

.daily-survey .survey-container h3 {
  margin-top: 0;
  font-size: 20px;
  font-weight: 600;
  color: #32325d;
  margin-bottom: 10px;
}

.daily-survey .survey-container .survey-description {
  color: #525f7f;
  margin-bottom: 20px;
  font-size: 14px;
}

.daily-survey .survey-container .question-text {
  font-weight: 500;
  color: #32325d;
}

.daily-survey .survey-container .question-options {
  margin-left: 20px;
  margin-bottom: 20px;
}

.daily-survey .survey-container .question-options .el-radio {
  margin-bottom: 10px;
  color: #525f7f;
}

.daily-survey .survey-container .question-options .el-radio.is-checked {
  color: #5e72e4;
}

.daily-survey .survey-container .survey-actions {
  margin-top: 20px;
  text-align: center;
}

.daily-survey .survey-container .survey-actions .el-button--primary {
  background: linear-gradient(90deg, #5e72e4, #825ee4);
  box-shadow: 0 4px 10px rgba(94, 114, 228, 0.3);
  transition: all 0.3s;
}

.daily-survey .survey-container .survey-actions .el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 14px rgba(94, 114, 228, 0.4);
}

.daily-survey .survey-result {
  background-color: white;
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.daily-survey .survey-result h3 {
  color: #32325d;
  font-size: 20px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 20px;
}

.daily-survey .survey-result .result-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, #f5f7ff, #ffffff);
  border-radius: 10px;
  border-left: 4px solid #5e72e4;
}

.daily-survey .survey-result .result-card .result-icon {
  font-size: 48px;
  margin-bottom: 20px;
  color: #5e72e4;
}

.daily-survey .survey-result .result-card h4 {
  font-size: 18px;
  font-weight: 600;
  color: #5e72e4;
  margin-top: 0;
  margin-bottom: 10px;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 8, 68, 0.4);
    transform: scale(1);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 8, 68, 0);
    transform: scale(1.05);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 8, 68, 0);
    transform: scale(1);
  }
}

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 内容卡片通用样式 */
.main-content {
  margin-top: 50px;
  margin-bottom: 30px;
  animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.content-card {
  border-radius: 15px;
  margin-bottom: 30px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
  background: linear-gradient(145deg, #ffffff, #f0f7f7);
  border: 1px solid rgba(94, 114, 228, 0.1);
  overflow: hidden;
  position: relative;
}

.content-card:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #5e72e4, #825ee4);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.content-card:hover {
  box-shadow: 0 15px 30px rgba(94, 114, 228, 0.15);
  transform: translateY(-5px);
}

.content-card:hover:before {
  opacity: 1;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(94, 114, 228, 0.1);
  background: linear-gradient(to right, rgba(94, 114, 228, 0.05), rgba(255, 255, 255, 0));
}

.card-header h2 {
  font-size: 20px;
  margin: 0;
  font-weight: 700;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #5e72e4, #825ee4);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0px 1px 2px rgba(94, 114, 228, 0.1);
  animation: textShine 3s linear infinite;
}

@keyframes textShine {
  to { background-position: 200% center; }
}

.card-header h2 i {
  margin-right: 10px;
  color: #5e72e4;
  font-size: 22px;
  animation: iconPulse 2s infinite;
}

@keyframes iconPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.empty-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
  color: #909399;
  background: radial-gradient(circle, rgba(94, 114, 228, 0.03) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 10px;
}

.empty-data i {
  font-size: 60px;
  margin-bottom: 15px;
  opacity: 0.5;
  color: #5e72e4;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.empty-data p {
  font-size: 16px;
  color: #606266;
  letter-spacing: 0.5px;
}

/* 公告卡片 */
.announcement-card {
  margin-top: 20px;
  margin-bottom: 24px;
}

.timeline-card {
  margin-bottom: 10px;
  border: 1px solid rgba(94, 114, 228, 0.1);
}

.notice-description {
  margin: 10px 0;
  color: #606266;
  font-size: 14px;
}

.notice-actions {
  display: flex;
  justify-content: flex-end;
}

/* 搜索卡片 */
.search-card {
  margin-bottom: 24px;
  background: linear-gradient(145deg, #ffffff, #f0f7f7);
}

.search-container {
  padding: 0;
}

.search-input-group {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.search-box {
  flex: 1;
  margin-right: 10px;
}

.hot-keywords {
  margin-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
}

/* 月度活跃统计 */
.statistics-block {
  margin-bottom: 24px;
  background: linear-gradient(145deg, #ffffff, #f0f7f7);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(94, 114, 228, 0.1);
}

.chart-container {
  padding: 20px;
  overflow: hidden;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-title {
  font-size: 16px;
  font-weight: 600;
  color: #5e72e4;
}

.chart-value {
  font-size: 20px;
  font-weight: 700;
  color: #5e72e4;
  display: flex;
  align-items: center;
}

.rating-tag {
  margin-left: 8px;
  font-weight: bold;
}

.chart-body {
  margin-top: 10px;
  overflow: hidden;
}

.chart-bars {
  display: flex;
  height: 140px;
  align-items: flex-end;
  justify-content: space-between;
  overflow: hidden;
}

.chart-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 0 4px;
}

.chart-bar-wrapper {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

/* 修复未闭合的样式规则 */
.chart-bar-wrapper .chart-bar {
  width: 100%;
  min-height: 4px;
  max-height: 100%;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(to top, #5e72e4, #825ee4) !important;
  position: relative;
  transition: all 0.5s ease;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(94, 114, 228, 0.2);
  animation: growUp 1.5s ease-out;
}

@keyframes growUp {
  from { height: 0% !important; }
  to { height: var(--final-height); }
}

.chart-bar-wrapper .chart-bar:hover {
  filter: brightness(1.1);
  transform: scaleX(1.05);
}

.chart-bar-count {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #606266;
}

.chart-bar-label {
  margin-top: 8px;
  font-size: 12px;
  color: #909399;
    text-align: center;
}

.activity-rating-info {
  margin-top: 20px;
  padding: 15px;
  background-color: #f8f9fb;
  border-radius: 8px;
  border-left: 3px solid #5e72e4;
}

.rating-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.rating-item {
  font-size: 12px;
  color: #606266;
  text-align: center;
  padding: 4px 8px;
  background: #f0f2f5;
  border-radius: 4px;
  margin-bottom: 5px;
}

/* 热门帖子卡片 */
.hot-posts-card {
  margin-bottom: 24px;
}

.hot-posts-list {
  display: flex;
  flex-direction: column;
}

/* 修复未闭合的样式规则 */
.post-item {
  display: flex;
  padding: 18px;
  border-bottom: 1px solid #EBEEF5;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  border-left: 5px solid #5e72e4;
  background: linear-gradient(to right, rgba(94, 114, 228, 0.05), rgba(255, 255, 255, 0));
}

.post-item:hover {
  background-color: rgba(94, 114, 228, 0.05);
  transform: translateX(5px);
}

.post-item:last-child {
  border-bottom: none;
}

.post-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 10px;
  color: #32325d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-author {
  color: #5e72e4;
}

.post-author i {
  color: #825ee4;
}

.post-content {
  flex: 1;
  overflow: hidden;
}

.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: #909399;
}

.post-stats {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-end;
  margin-left: 15px;
  font-size: 13px;
  color: #909399;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.stat-item i {
  font-size: 16px;
}

.loading-container {
  padding: 20px 0;
}

/* 智能助手样式 */
.eva-card {
  margin-bottom: 24px;
  border: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  background: linear-gradient(145deg, #ffffff, #f0f7f7);
  transition: all 0.3s ease;
  overflow: hidden;
  border: 1px solid rgba(94, 114, 228, 0.1);
}

.eva-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(26, 75, 110, 0.15);
}

.eva-card .card-header {
  background: linear-gradient(135deg, #5e72e4 0%, #825ee4 100%);
  background-size: 200% 200%;
  animation: gradientBG 15s ease infinite;
  padding: 15px;
  margin: -20px -20px 20px;
  border-radius: 15px 15px 0 0;
}

.eva-card .card-header h2 {
  color: #fff;
    font-size: 18px;
  margin: 0;
}

.eva-card .card-header h2 i {
  font-size: 20px;
  margin-right: 8px;
}

.eva-container {
  display: flex;
  align-items: center;
  padding: 20px;
  background: linear-gradient(145deg, rgba(64, 158, 255, 0.05), rgba(94, 114, 228, 0.02));
  border-radius: 12px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(94, 114, 228, 0.05);
}

.eva-container:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(94, 114, 228, 0.1);
}

.eva-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(145deg, #5e72e4, #825ee4);
  background-size: 200% 200%;
  animation: gradientBG 10s ease infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  box-shadow: 0 8px 15px rgba(26, 75, 110, 0.3);
  position: relative;
  overflow: hidden;
}

.eva-avatar:before {
  content: '';
  position: absolute;
  width: 150%;
  height: 150%;
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(45deg);
  top: -40%;
  left: -40%;
  animation: shine 3s infinite;
}

@keyframes shine {
  0% { top: -40%; left: -40%; }
  100% { top: 140%; left: 140%; }
}

.eva-avatar i {
  font-size: 32px;
  color: #fff;
  animation: pulse 2s infinite;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.eva-info {
  flex: 1;
}

.eva-name {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 5px;
}

.eva-status {
  font-size: 15px;
  color: #1a4b6e;
  display: flex;
  align-items: center;
  letter-spacing: 0.5px;
}

.eva-status:before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #2c7a7b;
  margin-right: 8px;
  animation: blink 2s infinite;
}

@keyframes blink {
  0% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0.5; transform: scale(1); }
}

.eva-actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.eva-actions .el-button {
  flex: 1;
  margin: 0 5px;
  padding: 12px 15px;
  font-weight: 600;
  transition: all 0.3s ease;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.eva-actions .el-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 15px rgba(94, 114, 228, 0.2);
}

.eva-actions .el-button--primary {
  background: linear-gradient(90deg, #5e72e4, #825ee4);
  border: none;
}

.eva-actions .el-button:first-child {
  margin-left: 0;
}

.eva-actions .el-button:last-child {
  margin-right: 0;
}

.eva-faq-preview {
  background-color: #f8f9fb;
  border-radius: 10px;
  padding: 15px;
  border-left: 3px solid #5e72e4;
}

.faq-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #303133;
}

.faq-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.faq-list li {
  padding: 12px 10px;
  color: #1a4b6e;
  cursor: pointer;
  border-bottom: 1px dashed rgba(26, 75, 110, 0.2);
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  border-radius: 8px;
  margin-bottom: 5px;
}

.faq-list li:last-child {
  border-bottom: none;
}

.faq-list li i {
  margin-right: 10px;
  font-size: 18px;
  color: #2c7a7b;
  transition: all 0.3s ease;
}

.faq-list li:hover i {
  transform: rotate(10deg) scale(1.1);
}

.faq-list li:hover {
  color: #2c7a7b;
  background-color: rgba(26, 75, 110, 0.05);
  border-radius: 8px;
  padding-left: 15px;
  transform: translateX(5px);
  box-shadow: 0 3px 10px rgba(94, 114, 228, 0.1);
}

.faq-answer {
  line-height: 1.6;
  color: #606266;
}

/* 按钮样式 */
.el-button--primary {
  background: linear-gradient(90deg, #5e72e4, #825ee4);
  border: none;
  box-shadow: 0 4px 10px rgba(94, 114, 228, 0.3);
  transition: all 0.3s;
}

.el-button--primary:hover {
  background: linear-gradient(90deg, #4a59c4, #7048d4);
  transform: translateY(-2px);
  box-shadow: 0 7px 14px rgba(94, 114, 228, 0.4);
}

.el-button--text {
  color: #5e72e4;
}

.el-button--text:hover {
  color: #4a59c4;
}

/* 标签样式 */
.el-tag {
  background-color: rgba(94, 114, 228, 0.1);
  border-color: rgba(94, 114, 228, 0.2);
  color: #5e72e4;
}

.el-tag--info {
  background-color: rgba(94, 114, 228, 0.1);
  border-color: rgba(94, 114, 228, 0.2);
  color: #5e72e4;
}

/* 进度条样式 */
.el-progress-bar__inner {
  background: linear-gradient(90deg, #5e72e4, #825ee4);
}

/* 分割线样式 */
.el-divider {
  color: #5e72e4;
}

.el-divider__text {
  background-color: #f8f9fb;
  color: #5e72e4;
  font-weight: bold;
}

/* 公告详情抽屉样式 */
.announcement-drawer /deep/ .el-drawer__header {
  padding: 20px;
  margin-bottom: 0;
  border-bottom: 1px solid #EBEEF5;
  background: linear-gradient(90deg, #5e72e4, #825ee4);
  color: white;
  font-weight: 600;
}

.announcement-container {
  padding: 0 30px 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.announcement-header {
  padding: 20px 0;
}

.title {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 15px;
  line-height: 1.4;
}

.announcement-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 14px;
  color: #909399;
}

.meta-item {
  display: flex;
  align-items: center;
}

.meta-item i {
  margin-right: 5px;
}

.announcement-content {
  flex: 1;
  padding: 25px;
  margin: 20px 0;
  background: #f8faff;
  border-radius: 10px;
  border-left: 4px solid #5e72e4;
  overflow-y: auto;
  font-size: 16px;
  line-height: 1.8;
  color: #303133;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.announcement-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.timeline-card {
  cursor: pointer;
  border-left: 3px solid #5e72e4;
  transition: all 0.3s ease;
}

.timeline-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(94, 114, 228, 0.15);
}

.notice-actions .el-button {
  color: #5e72e4;
  padding: 4px 10px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.notice-actions .el-button:hover {
  background-color: rgba(94, 114, 228, 0.1);
  color: #5e72e4;
  transform: translateY(-2px);
}

/* 增加时间线样式 */
.el-timeline /deep/ .el-timeline-item__node {
  background-color: #5e72e4;
}

.el-timeline /deep/ .el-timeline-item__tail {
  border-left-color: rgba(94, 114, 228, 0.2);
}

/* 搜索框样式 */
.search-box .el-input /deep/ .el-input__inner {
  border-color: rgba(94, 114, 228, 0.2);
}

.search-box .el-input /deep/ .el-input__inner:focus {
  border-color: #5e72e4;
  box-shadow: 0 0 0 2px rgba(94, 114, 228, 0.1);
}

.search-box .el-button {
  background: linear-gradient(90deg, #5e72e4, #825ee4);
  border: none;
  box-shadow: 0 4px 10px rgba(94, 114, 228, 0.3);
  transition: all 0.3s;
}

.search-box .el-button:hover {
  box-shadow: 0 7px 14px rgba(94, 114, 228, 0.4);
  transform: translateY(-2px);
}

.hot-keywords .el-tag {
  background-color: rgba(94, 114, 228, 0.1);
  border-color: rgba(94, 114, 228, 0.2);
  color: #5e72e4;
  cursor: pointer;
  transition: all 0.3s;
}

.hot-keywords .el-tag:hover {
  background-color: rgba(94, 114, 228, 0.2);
  transform: translateY(-1px);
}

/* 修改热门帖子样式 */
.post-item {
  border-left: 5px solid #5e72e4;
  transition: all 0.3s;
}

.post-title {
  color: #32325d;
}

.post-author {
  color: #5e72e4;
}

.post-author i {
  color: #825ee4;
}

/* 欢迎区域背景修改 */
.welcome-section {
  background: linear-gradient(135deg, #5e72e4 0%, #825ee4 100%);
}

/* 统计图表颜色 */
.chart-container .chart-title {
  color: #5e72e4;
}

.chart-value {
  color: #5e72e4;
}

.chart-bar-wrapper .chart-bar {
  background: linear-gradient(to top, #5e72e4, #825ee4) !important;
}

.statistics-block {
  border: 1px solid rgba(94, 114, 228, 0.1);
}

.activity-rating-info {
  border-left: 3px solid #5e72e4;
}

/* 分割线样式 */
.el-divider {
  color: #5e72e4;
}

.el-divider__text {
  color: #5e72e4;
  font-weight: bold;
}

/* 卡片中链接样式 */
a {
  color: #5e72e4;
}

a:hover {
  color: #4a59c4;
}

/* 修复嵌套选择器问题 */
.intro-content p {
  margin: 0 0 10px;
  line-height: 1.6;
  color: #525f7f;
}

.intro-content p:last-child {
  margin-bottom: 0;
}
</style>
